<template>
    <div class="left">
        <div class="left-box1" id="login"></div>
        <div class="left-box2">
            <div class="title">
                <i class="el-icon-s-order" style="position: absolute;left: 4%;margin-top: 5px;"></i>
                <span>线上销售实时信息展示</span>
            </div>
            <div id="carbar" class="carmid" >
              <el-row :gutter="20" style="height: 25px;line-height: 25px;" type="flex" align="middle" justify="center" >
                <el-col :span="5" class="col_tal">营业厅</el-col>
                <el-col :span="5" class="col_tal">姓名</el-col>
                <el-col :span="4" class="col_tal">客户</el-col>
                <el-col :span="5" class="col_tal">办理业务</el-col>
                <el-col :span="7" class="col_tal">办理时间</el-col>
              </el-row>
              <div style="float:left;width: 100%;height:84%;overflow: hidden;color: #fff;">
                <vue-seamless-scroll :data="list" :class-option="classOption">
                  <el-row :gutter="20" :class="(index+1)%2 ==0?'tabulationrowback':'tabulationrow'" type="flex" align="middle" justify="center"
                            v-for="(item,index) in list" :key='index' :id='index' :data-id="item.id">
                      <el-col :span="5" :data-id="item.id" class="col_content">{{item.busName}}</el-col>
                      <el-col :span="5" :data-id="item.id" class="col_content" style="color: #13f6f9;">{{item.name}}</el-col>
                      <el-col :span="4" :data-id="item.id" class="col_content">{{item.wcUserName}}</el-col>
                      <el-col :span="5" :data-id="item.id" class="col_content">{{item.handleName}}</el-col>
                      <el-col :span="7" :data-id="item.id" class="col_content" style="color: #ffda0a;">
                        <template>
                            <span>{{ parseTime(item.handleTime, '{m}-{d} {h}:{i}') }}</span>
                        </template>
                      </el-col>
                    </el-row>
                </vue-seamless-scroll>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import request from '@/utils/request'
export default {
  name: "cockpitLeft",

  data() {
    return {
        list:[]
    };
  },
  components: {

  },
  mounted() {
    for(var i=0;i<20;i++){
       this.list.push({id:1,busName:'龙亭区1',name:'张三',wcUserName:'李先生',handleName:'嗨卡套餐',handleTime:'2024-05-20 12:31:45'})
    }
    this.getOnLine()
  },
  computed: {
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  methods: {
    getOnLine(){
      var data=[{name:'已登录人数',value:0},{name:'未登录人数',value:0},{name:'异常离线人数',value:0}]
      onLineList().then(res=>{
          //console.log(res)
          if(res.code==200){
             if(res.data){
              data[0].value=res.data.on_line
              data[1].value=res.data.not_line
              data[2].value=res.data.err_line
             }
          }
          this.getChart(data)
      })
    },
    getChart(data){
        var chartDom = document.getElementById('login');
        var myChart = echarts.init(chartDom);
        myChart.clear();
        let listener = function () {
           myChart.resize();
        };
        window.addEventListener("resize", listener);
        var option;
        option = {
            title: {
                left: "center",
                top: 'top', 
                text:'当日登录占比统计图',
                textStyle: {
                  color: '#fff', 
                  fontSize: 14 
                },
            },
            tooltip: {
                trigger: "item",
                padding: 3,
                formatter: "{b}:{c}位"
            },
            legend: {
	          	top: '13%',
	          	left:'center',
	          	itemWidth:20,
	          	itemHeight:13,
	          	itemGap:20,
	          	textStyle:{
	          	    color:'#fff',
	          	    fontSize:10
	          	},
	          	selectedMode: false,
	          	data: ['已登录人数','未登录人数','异常离线人数']
	          },
            
            series: [{
                type: "pie",
                radius: ["25%", "40%"],
                center: ['50%', '60%'],
                startAngle:50,//指引线的角度改变
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                                fontSize: "14"
                            },
                            formatter: function(val) {
                                return val.name + val.value + "位";
                            },
                        },
                        labelLine: {
                            show: true,
                             length: 15,
                             length2:15,
                            lineStyle: {
                                color: "#fff"
                            }
                        },
                    },
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                        textColor: "#fff"
                    }
                },
                data,
            }],
            color: ["#15dde0","#1356cf","#f9f7ea"] 
        };
        option && myChart.setOption(option);
    }
  },
};

 // 查询今日登录
export function onLineList(query) {
  return request({
    url: '/report/dayOnlineAll',
    method: 'get',
    data: query
  })
}
</script>

<style scoped lang="scss">
   .left{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
   }
   .left-box1{
       width: 100%;
       height: 40%;
       background-image:  url(../../../assets/images/box1.png);
       background-size: 100% 100%;
       padding: 35px;
       padding-bottom: 40px;
   }
   .left-box2{
       display: flex;
       flex-direction: column;
       height: 60%;
       width: 100%;
       margin-top: 20px;
       font-size: 14px;
       .title{
          width: 100%;
          background-color: #0c5f72b4;
          height: 25px;
          border-radius: 3px;
          line-height: 25px;
          text-align: center;
          color: #13f6f9;
          margin-bottom: 15px;
       }
       .carmid {
         width: 100%;
         height:90%;
         float: left;
         font-size: 13px;
         .tabulationrow{
           height:25px;
           background-color: #83929a;
         }
         .tabulationrowback{
            height:25px;
            background-color: #404e5d;
         }
       }
       .col_tal{
         font-weight: 500;
         background-image:-webkit-linear-gradient(top, #e3d4d4, #a8c2de, #5fb3ea);
         -webkit-background-clip:text;
         -webkit-text-fill-color:transparent;
         letter-spacing: 0px;
       }
       .col_content{
         overflow: hidden;  /*溢出隐藏*/
         /*text-overflow: ellipsis; !*以省略号...显示*!*/
         white-space: nowrap;  /*强制不换行*/
       }

   }
</style>